<script setup>
  import { defineProps,onMounted } from 'vue';

  // 接收父组件传递过来的 props
  const props = defineProps({
    userName: String,
    userAvatar: String,
    comment: String,
    identity: String
  });
  onMounted(() => {
    console.log('userName:', props.userName);
    console.log('userAvatar:', props.userAvatar);
    console.log('comment:', props.comment);
    console.log('identity:', props.identity);
  });
</script>

<template>
  <el-card style="width: auto; height: auto; border-radius: 20px; margin-top:10px;  ">
    <el-row gutter="1" :align="middle">
      <!-- 头像和昵称放在同一行 -->
      <el-col :span="4">
        <el-avatar :src="props.userAvatar" :size="40" />
      </el-col>
      <el-col :span="20">
        <el-row style="margin-bottom: 5px;">
          <span style="margin-top: 0px;margin-left: 0;">
            <el-text style="font-size: 19px;" tag="b">{{ props.userName }}</el-text>
          </span>
          <el-tag size="small" style="background-color: #ffd466; color:#fff;border-color: #ffd466;margin-top:4px;margin-left: 10px;">
            {{ props.identity }}
          </el-tag>
        </el-row >
        <!-- 评价内容放在昵称下方 -->
        <el-text style="font-size: 16px; ">{{ props.comment }}</el-text>
      </el-col>
    </el-row>
  </el-card>
</template>